<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="bais">
        <title>康桥知园</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
            body{
                background: rgb(243, 247, 248);
            }
            p{
                background: white;
                margin: 0;
                padding-left: 6%;
            }
            header img{
                width: 100vw;
            }
            header p{
                font-size: 6vw;
                font-family: 楷体;
                font-weight: bold;
                color: rgb(68, 68, 68);
                background: white;
                padding-left: 6%;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            header p img{
                height: 7vw;
                width: 7vw;
            }
            footer{
                background: orangered;
                width: 95vw;
                height: 15vw;
                margin-left: 2.5vw;
                color: white;
                font-family: 楷体;
                text-align: center;
                font-size: 5vw;
                line-height: 15vw;
                margin-top: 10px;
                border-radius: 5px;
            }
            a{
                cursor: default;
            }
            main{
                margin-top: 12px;
            }
            main p{
                height: 13vw;
                line-height: 12vw;
                font-size: 5vw;
                font-family: 楷体;
                /*font-weight: bold;*/
                border-bottom: 1px solid gray;
            }
            main p input{
                color: rgb(154, 154, 154);
                border: none;
                width: 50vw;
            }
        </style>
    </head>
    <body>
        <header>
            <img src="img/kanfang/01.png" alt="01">
            <p><img src="img/kanfang/02.png" alt="010">楼盘地址</p>
        </header>
        <main>
            <p><span class="glyphicon glyphicon-user"></span>
            姓名&#X3000;&#X3000;&#X3000;&#X3000;<input type="text" value="请输入姓名"></p>
            <p><span class="glyphicon glyphicon-phone"></span>
            联系手机&#X3000;&#X3000;<input type="text" value="请输入手机号"></p>
            <p><span class="glyphicon glyphicon-calendar"></span>
            预约日期&#X3000;&#X3000;<input type="text" value="请选择日期" data-toggle="modal" data-target="#myModal"></p>
            <!--预约日期模态框-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" style="margin-top: 35vh;height: 70vw;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
			</div>
			<select name="number" id="num" style="margin-left: 20px;border-radius: 0px;border: none;font-size: 5vw;">
                <option value="年" selected>2017</option>
                <option value="年">2016</option>
            </select>
            <select name="nian" id="nians" style="margin-left: 20px;border-radius: 0px;border: none;font-size: 5vw;">
                <option value="月">01</option>
                <option value="月">02</option>
                <option value="月">03</option>
                <option value="月">04</option>
                <option value="月">05</option>
                <option value="月" selected>06</option>
                <option value="月">07</option>
                <option value="月">08</option>
                <option value="月">09</option>
                <option value="月">10</option>
                <option value="月">11</option>
                <option value="月">12</option>
            </select>
            <select name="ri" id="ri1" style="margin-left: 20px;border-radius: 0px;border: none;font-size: 5vw;">
                <option value="日">01</option>
                <option value="日">02</option>
                <option value="日">03</option>
                <option value="日">04</option>
                <option value="日">05</option>
                <option value="日">06</option>
                <option value="日">07</option>
                <option value="日">08</option>
                <option value="日">09</option>
                <option value="日">10</option>
                <option value="日">11</option>
                <option value="日">12</option>
                <option value="日">13</option>
                <option value="日">14</option>
                <option value="日">15</option>
                <option value="日">16</option>
                <option value="日">17</option>
                <option value="日">18</option>
                <option value="日">19</option>
                <option value="日">20</option>
                <option value="日">21</option>
                <option value="日">22</option>
                <option value="日">23</option>
                <option value="日">24</option>
                <option value="日">25</option>
                <option value="日">26</option>
                <option value="日">27</option>
                <option value="日">28</option>
                <option value="日">29</option>
                <option value="日">30</option>
                <option value="日">31</option>
            </select>
			<div class="modal-footer" style="position: absolute;bottom: 0px;right: 0px;">
				<button type="button"  data-dismiss="modal" style="background: white;color: blue;border: none;">取消
				</button>
				<button type="button"  data-dismiss="modal" style="background: white;color: blue;border: none;">
					确定
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

            <p><span class="glyphicon glyphicon-ok-circle"></span>
            预约时间&#X3000;&#X3000;<input type="text" value="请选择时间" data-toggle="modal" data-target="#myModal1">
            </p>
                        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content" style="margin-top: 35vh;height: 70vw;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
			</div>
            <select name="shi" id="shis" style="margin-left: 20px;border-radius: 0px;border: none;font-size: 5vw;">
                <option value="月" selected>00</option>
                <option value="月">01</option>
                <option value="月">02</option>
                <option value="月">03</option>
                <option value="月">04</option>
                <option value="月">05</option>
                <option value="月">06</option>
                <option value="月">07</option>
                <option value="月">08</option>
                <option value="月">09</option>
                <option value="月">10</option>
                <option value="月">11</option>
                <option value="月">12</option>
                <option value="月">13</option>
                <option value="月">14</option>
                <option value="月">15</option>
                <option value="月">16</option>
                <option value="月">17</option>
                <option value="月">18</option>
                <option value="月">19</option>
                <option value="月">20</option>
                <option value="月">21</option>
                <option value="月">22</option>
                <option value="月">23</option>
            </select>
            <select name="fen" id="fens" style="margin-left: 20px;border-radius: 0px;border: none;font-size: 5vw;">
                <option value="日">01</option>
                <option value="日">02</option>
                <option value="日">03</option>
                <option value="日">04</option>
                <option value="日">05</option>
                <option value="日">06</option>
                <option value="日">07</option>
                <option value="日">08</option>
                <option value="日">09</option>
                <option value="日">10</option>
                <option value="日">11</option>
                <option value="日">12</option>
                <option value="日">13</option>
                <option value="日">14</option>
                <option value="日">15</option>
                <option value="日">16</option>
                <option value="日">17</option>
                <option value="日">18</option>
                <option value="日">19</option>
                <option value="日">20</option>
                <option value="日">21</option>
                <option value="日">22</option>
                <option value="日">23</option>
                <option value="日">24</option>
                <option value="日">25</option>
                <option value="日">26</option>
                <option value="日">27</option>
                <option value="日">28</option>
                <option value="日">29</option>
                <option value="日">30</option>
                <option value="日">31</option>
                <option value="日">32</option>
                <option value="日">33</option>
                <option value="日">34</option>
                <option value="日">35</option>
                <option value="日">36</option>
                <option value="日">37</option>
                <option value="日">38</option>
                <option value="日">39</option>
                <option value="日">40</option>
                <option value="日">41</option>
                <option value="日">42</option>
                <option value="日">43</option>
                <option value="日">44</option>
                <option value="日">45</option>
                <option value="日">46</option>
                <option value="日">47</option>
                <option value="日">48</option>
                <option value="日">49</option>
                <option value="日">50</option>
                <option value="日">51</option>
                <option value="日">52</option>
                <option value="日">53</option>
                <option value="日">54</option>
                <option value="日">55</option>
                <option value="日">56</option>
                <option value="日">57</option>
                <option value="日">58</option>
                <option value="日">59</option>
            </select>
			<div class="modal-footer" style="position: absolute;bottom: 0px;right: 0px;">
				<button type="button"  data-dismiss="modal" style="background: white;color: blue;border: none;">取消
				</button>
				<button type="button"  data-dismiss="modal" style="background: white;color: blue;border: none;">
					确定
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

            
            <a href="" style="text-decoration: none;"><footer>
                立即预约
            </footer></a>
        </main>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>